<!doctype html>
<html>
<head>
  <style>
    html,
    body {
      margin: 0;
      width: 100%;
      height: 100%;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div id="mount"></div>
  <script>
    const mount = document.getElementById('mount');
    const {ipcRenderer} = require('electron');
    const {requireFromFile} = require('haiku-serialization/src/bll/ModuleWrapper');
    const {default: HaikuDOMAdapter} = require('@haiku/core/lib/adapters/dom/HaikuDOMAdapter');
    let bytecode, component;

    ipcRenderer.on('mount', (_, {bytecodePath, width, height, options}) => {
      if (component) {
        return;
      }

      try {
        bytecode = requireFromFile(bytecodePath);
        mount.style.width = width;
        mount.style.height = height;

        component = HaikuDOMAdapter(bytecode)(
          mount,
          {
            ...options,
          },
        );

        ipcRenderer.once('unmount', () => {
          component.context.destroy();
          component = undefined;
        });
      } catch (error) {
        console.error(error);
      }
    });
  </script>
</body>
</html>
